<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>生产线产能设置</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/elementui/index.css">
</head>
<body>
<div id="app">
    <el-button type="primary" @click="dialogFormVisible = true">添加产线</el-button>
    <el-table
            :data="productionLines"
            style="width: 100%">
        <el-table-column
                label="编号">
            <template slot-scope="scope">{{scope.row.id}}</template>
        </el-table-column>
        <el-table-column
                label="名称">
            <template slot-scope="scope">{{scope.row.productionName}}</template>
        </el-table-column>
        <el-table-column
                label="生产能力 组/天">
            <template slot-scope="scope">{{scope.row.productionCapacity}}</template>
        </el-table-column>
        <el-table-column
                label="可生产型号">
            <template slot-scope="scope">{{scope.row.productionType}}</template>
        </el-table-column>
        <el-table-column
                label="负责人">
            <template slot-scope="scope">{{scope.row.principal}}</template>
        </el-table-column>
        <el-table-column
                label="产线人数">
            <template slot-scope="scope">{{scope.row.num}}</template>
        </el-table-column>
        <el-table-column
                label="生产状态">
            <template slot-scope="scope">
                <span v-if="scope.row.state==1" style="color: red">正在生产</span>
                <span v-else style="color: red">未生产</span>
            </template>
        </el-table-column>
        <el-table-column
                label="备注">
            <template slot-scope="scope">{{ scope.row.remark}}</template>
        </el-table-column>

        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
            background
            layout="prev, pager, next"
            @current-change="loadPage"
            :total="total"
            :current-page="current"
            :page-size="pageSize">
    </el-pagination>
    <!--添加/修改生产线的对话框-->
    <el-dialog title="添修产线" :visible.sync="dialogFormVisible" @close="closeMyDialog">
        <el-form :model="productionLine">
            <el-form-item label="产线名称" :label-width="formLabelWidth">
                <el-input v-model="productionLine.productionName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="生产能力" :label-width="formLabelWidth">
                <el-input v-model="productionLine.productionCapacity" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="可生产型号" :label-width="formLabelWidth">
                <el-input v-model="productionLine.productionType" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="负责人" :label-width="formLabelWidth">
                <el-input v-model="productionLine.principal" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="产线人数" :label-width="formLabelWidth">
                <el-input v-model="productionLine.num" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="状     态">
                <el-radio-group v-model="productionLine.state">
                    <el-radio label="1">正在生产</el-radio>
                    <el-radio label="-1">未生产</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input v-model="productionLine.remark" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveProductionLine">确 定</el-button>
        </div>
    </el-dialog>
    <!--删除生产线的对话框-->
    <el-dialog title="删除生产线" :visible.sync="dialogFormVisible1" @close="closeMyDialog">
        <el-form :model="productionLine">
            <span style="text-align: center">确定要删除此生产线吗</span>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible1 = false">取 消</el-button>
            <el-button type="primary" @click="deleteProductionLine">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script src="/qs/qs.min.js"></script>
<script src="/vue/vue.js"></script>
<script src="/axios/axios.min.js"></script>
<!-- 引入组件库 -->
<script src="/elementui/index.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return{
                productionLines:null,
                total: 0,//总条数
                current: 0,//当前页数
                pageSize: 0, //每页条数
                dialogFormVisible: false,//控制对话框的显示
                productionLine: {      //角色对话框的数据
                    id: '',
                    productionName: '',
                    productionCapacity: '',
                    productionType: '',
                    principal: '',
                    num: '',
                    state: '',
                    remark: ''
                },
                formLabelWidth: '120px',//表单标签的宽度
                dialogFormVisible1:false
            }
        },
        methods:{
            //当前页跳转的方法
            loadPage(current) {
                this.current = current;
                //查询商品
                axios.get("/productionLines?current=" + current).then(value => {
                    if (value.data.state == 1) {
                    this.productionLines = value.data.data.records;
                    this.total = value.data.data.total;
                    this.pageSize = value.data.data.size;
                    this.current = value.data.data.current;
                }
            },
            )},
            //关闭对话框
            closeMyDialog(){
                //清空数据
                this.productionLine = {      //产品对话框的数据
                    id: '',
                    productionName: '',
                    productionCapacity: '',
                    productionType: '',
                    principal: '',
                    num: '',
                    state: '',
                    remark: ''
                }
            },
            //显示修改用户的对话框
            handleEdit(index, row) {
                this.productionLine = row;
                this.dialogFormVisible = true;
            },
            saveProductionLine(){
                if(this.productionLine.id==''){
                    axios.post("/productionLine",{
                        productionName:this.productionLine.productionName,
                        productionCapacity:this.productionLine.productionCapacity,
                        productionType:this.productionLine.productionType,
                        principal:this.productionLine.principal,
                        num:this.productionLine.num,
                        state:this.productionLine.state,
                        remark:this.productionLine.remark
                    }).then(value => {
                        if(value.data.state==1) {
                            this.loadPage(1)
                        }
                    })
                }else {
                    axios.put("/productionLine",{
                        id:this.productionLine.id,
                        productionName:this.productionLine.productionName,
                        productionCapacity:this.productionLine.productionCapacity,
                        productionType:this.productionLine.productionType,
                        principal:this.productionLine.principal,
                        num:this.productionLine.num,
                        state:this.productionLine.state,
                        remark:this.productionLine.remark,
                    }).then(value => {
                        if(value.data.state==1) {
                            this.loadPage(1)
                        }
                    })
                }
                this.dialogFormVisible = false;
            },
            handleDelete(index, row) {
                this.productionLine = row;
                this.dialogFormVisible1 = true;
            },
            deleteProductionLine(){
                axios.delete("/productionLine/"+this.productionLine.id).then(value => {
                    if (value.data.state==1){
                        this.loadPage(1)
                    }
                }),
                    this.dialogFormVisible1 = false;
            },
        },
        mounted(){
            this.loadPage(1)
        }
    })
</script>

</body>
</html>